<template>
  <div class="video-page">
    <header>视频</header>
    <main>
      <div class="item" v-for="it in itemList" :key="it.id">
        <div class="content">
          <video controls :src="it.src"></video>
        </div>
        <div class="wrap">
          <span class="tltle">{{ it.name }}</span>
          <span class="comment" @click="commentChange(it)">
            <van-icon name="fire" color='#ee0a24' v-if="it.commentshow" />
            <van-icon name="fire" color="#8c8c8c" v-else />
            {{ it.comments }}
          </span>
          <span class="like" @click="likeChange(it)">
            <van-icon name="like" color='#ee0a24' v-if="it.likeshow" />
            <van-icon name="like" color="#8c8c8c" v-else />
            {{ it.likes }}
          </span>
        </div>
      </div>
    <div class="tip">没有更多了</div>
    </main>
  </div>
</template>
<script setup  >
import { getVideosApi } from '../../apis/videoApi'
import { onMounted, ref } from 'vue'
const itemList = ref([])
onMounted(
  async function () {
    // 获取视频数据
    const result = await getVideosApi()
    itemList.value = result.data
    itemList.value.forEach(it => {
      it.src = 'http://www.shuiyue.info:15666' + it.src
      it.commentshow = false
      it.likeshow = false
      console.log(result.data)
    })
    console.log(itemList)
  }

)
// // 改变评论图标颜色
function commentChange(e) {
  e.commentshow = !e.commentshow
  if (e.commentshow) {
    e.comments += 1
  } else {
    e.comments -= 1
  }
}
// 改变喜欢图标颜色
function likeChange(e) {
  e.likeshow = !e.likeshow
  if (e.likeshow) {
    e.likes += 1
  } else {
    e.likes -= 1
  }
}
</script>

<style  scoped   lang="less">
@import '../../style/common.less';

.video-page {
  display: block;
  position: relative;
  height: 100%;

  .tip {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: @g05;
    font-size: .7rem;
  }

  >header {
    display: block;
    position: fixed;
    z-index: 9;
    top: 0;
    width: 100%;
    height: 48px;
    font-size: .9rem;
    text-align: center;
    line-height: 48px;
    background: white;
    background-image: linear-gradient(to top, @c02, @c05);
    line-height: 48px;
    color: @g00;

  }

  >main {
    height: calc(100% - 48px);
    margin-top: 48px;

    >.item {
      display: block;
      position: relative;
      background: white;
      font-size: .9rem;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-bottom: 15px;

      >.content {
        display: block;
        position: relative;
        margin: auto;
        margin-bottom: 10px;

        >video {
          display: block;
          position: relative;
          width: 250px;
          height: 150px;
          margin: auto;
        }
      }

      >.wrap {
        display: block;
        position: relative;
        line-height: 24px;
        padding-left: 5px;
        padding-right: 5px;

        >.title {
          display: block;
          position: relative;
          font-size: .6rem;
          float: left;
          color: @g06;
        }

        >.comment {
          font-size: .7rem;
          padding-left: 10px;
          float: right;
          color: #8c8c8c
        }

        >.like {
          font-size: .7rem;
          padding-left: 10px;
          float: right;
          color: #8c8c8c
        }
      }
    }
  }
}
</style>
